<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../../common/css/user.css" media="all"/>
</head>

<body class="childrenBody">

<!--搜索栏-->
<blockquote class="layui-elem-quote news_search">
    <form class="layui-form" lay-filter="example_query">


<!--        <div class="layui-inline">-->
<!--            <a class="layui-btn search_btn" lay-submit="" lay-filter="query" style="margin-left: 20px">查询</a>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <button class="layui-btn search_btn" type="reset" style="margin-left: 20px">重置</button>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <a class="layui-btn layui-btn-normal add_btn" lay-submit="" lay-filter="add" style="margin-left: 20px">寄快递</a>-->
<!--        </div>-->
    </form>
</blockquote>
<!--表格区-->
<div class="layui-form users_list">
    <!--通过lay-filter区分toolbar事件容器-->
    <table id="list-data" lay-filter="dataListFilter" class="layui-table">
    </table>
</div>
<!--分页元素-->
<div id="page"></div>
<!--toolbar 模板-->
<script type="text/html" id="barDemo">
    <!--通过lay-event定义事件-->
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<!--一般情况下，一个业务页面引入一个layui.js,config.js和业务js这三个js就够了-->
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript" src="../../common/js/config.js"></script>


<script>
    layui.config({
        base: $config.resUrl + '/web/common/js/'//定义基目录
    }).extend({
        ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool: 'tool',
        $api: 'api'
    }).use(['laydate', 'form', 'layer', 'jquery', 'table', 'laypage', 'ajaxExtention', '$tool', '$api'], function () {

        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laypage = layui.laypage,
            $tool = layui.$tool,
            laydate = layui.laydate,
            table = layui.table,
            $api = layui.$api;


        var tableIns;//表格实例

        /**
         * 定义表格
         * */
        function defineTable() {
            tableIns = table.render({
                elem: '#list-data'
                , id: 'dataTable'
                , height: 500
                , url: $tool.getContext() + '/expressDelivery/pageListByExpress' //数据接口
                , method: 'get'
                , page: true //开启分页
                , response: {
                    statusName: 'code'
                    , statusCode: 200
                },
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.data.totalCount, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'id',title:'编号'}
                        // ,{field: 'createDate',title:'创建时间'}
                        // ,{field: 'modifyDate',title:'修改时间'}
                        // ,{field: 'sendUserId',title:'用户id'}
                        ,{field: 'sendName',title:'发货人名字'}
                        ,{field: 'sendMobile',title:'发货人手机号'}
                        ,{field: 'sendAddress',title:'发货地址'}
                        ,{field: 'description',title:'快件描述'}
                        ,{field: 'remark',title:'备注'}
                        ,{field: 'receiveName',title:'收货人名字'}
                        ,{field: 'receiveMobile',title:'收货人手机号'}
                        ,{field: 'receiveAddress',title:'收货地址'}
                        // ,{field: 'expressManId',title:'快递员id'}
                        // ,{field: 'isReceive',title:'是否接单'}
                        // ,{field: 'isDelivery',title:'是否派送'}
                        // ,{field: 'receiveDate',title:'接单时间'}
                        // ,{field: 'deliveryDate',title:'派送时间'}
                        // ,{field: 'orderStatus',title:'订单状态： 1（用户下单） ； 2（快递员接单） ； 3（派送中） ； 4（已收货）'}
                        ,{fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]
                ]
                , done: function (res, curr) {//请求完毕后的回调
                    //如果是异步请求数据方式，res即为你接口返回的信息.curr：当前页码
                }
            });

            //为toolbar添加事件响应
            table.on('tool(dataListFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var row = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                //区分事件
                if (layEvent === 'del') { //删除
                    $api.doPost('/expressDelivery/delete', {id: row.id}, function (res) {
                        if (res.code == 200) {
                            tableIns.reload();
                            layer.msg("删除成功！", {time: 500});
                        } else {
                            layer.msg("删除失败！", {time: 500});
                        }
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 1
                        , title: "修改"
                        , area: '600px'
                        , shade: 0.1
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['提交', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $("#formDom1")
                        , success: function (layero, index) {
                            //获取新窗口对
                            form.render();
                            //获取数据
                            $api.doGet('/expressDelivery/selectByPrimaryKey', {id: row.id}, function (result) {
                                if (result.code != 200) {
                                    layer.close(index);
                                    layer.msg(result.data, {time: 500});
                                    return;
                                }
                                form.val('example1', result.data);
                            });
                        }
                        , yes: function () {
                            form.verify();
                            var data = form.val('example1');
                            $api.doPost('/expressDelivery/update', data, function (result) {
                                if (result.code != 200) {
                                    layer.msg(result.data, {time: 500});
                                    layer.closeAll();
                                    return;
                                }
                                layer.closeAll();
                                $('#formDom1')[0].reset();
                                var reqData = form.val('example_query');
                                tableIns.reload({
                                    where: reqData
                                });
                                layer.msg("保存成功！", {time: 500});
                            });
                        }
                    });
                } else if (layEvent === 'details') {
                    // nothing
                    layer.open({
                        type: 1
                        , title: "详情"
                        , area: '600px'
                        , shade: 0.1
                        , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                        // , btn: ['提交', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $("#formDom")
                        , success: function (layero, index) {
                            //获取新窗口对
                            form.render();
                            //获取数据
                            $api.doGet('/expressDelivery/selectByPrimaryKey', {id: row.id}, function (result) {
                                if (result.code != 200) {
                                    layer.close(index);
                                    layer.msg(result.data, {time: 500});
                                    return;
                                }
                                form.val('example', result.data);
                            });
                        }
                        , yes: function () {

                        }
                    });
                }
            });
        }

        defineTable();

        form.on("submit(query)", function (data) {
            var reqData = form.val('example_query');
            tableIns.reload({
                where: reqData
            });
            return false;
        });

        form.on("submit(add)", function (data) {
            window.location.href = "createOrder.html";
            return false;
        });

        function add(){
            //重置表单
            $('#formDom')[0].reset();
            layer.open({
                type: 1
                , title: "添加"
                , area: '600px'
                , shade: 0.2
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['提交', '取消']
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , content: $("#formDom") /** 注意：DOM一定要放在body之外的地方，否则你会崩溃！！！！！**/
                , success: function (layero) {
                    //获取新窗口对
                    //form.render();
                }
                , yes: function () {
                    form.verify();
                    var data = form.val('example');
                    $api.doPost('/expressDelivery/save', data, function (result) {
                        if (result.code != 200) {
                            layer.msg(result.msg, {time: 500});
                            return;
                        }
                        layer.closeAll();
                        layer.msg("保存成功！", {time: 500});
                        $('#formDom')[0].reset();
                    });
                }
            });
        }

    });
</script>
</body>


<form class="layui-form" action="" lay-filter="example" id="formDom" style="display: none; padding: 30px">

    <input type="hidden" name="id">
    <input type="hidden" name="createDate">
    <input type="hidden" name="modifyDate">
    <input type="hidden" name="sendUserId">



    <div class="layui-form-item">
        <label class="layui-form-label">发货人名字</label>
        <div class="layui-input-block">
            <input type="text" name="sendName" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发货人手机号</label>
        <div class="layui-input-block">
            <input type="text" name="sendMobile" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发货地址</label>
        <div class="layui-input-block">
            <input type="text" name="sendAddress" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">快件描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remark" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货人名字</label>
        <div class="layui-input-block">
            <input type="text" name="receiveName" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货人手机号</label>
        <div class="layui-input-block">
            <input type="text" name="receiveMobile" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货地址</label>
        <div class="layui-input-block">
            <input type="text" name="receiveAddress" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否接单</label>
        <div class="layui-input-block">
            <input type="radio" name="isReceive" value="1" title="是" >
            <input type="radio" name="isReceive" value="0" title="否" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否派送</label>
        <div class="layui-input-block">
            <input type="radio" name="isDelivery" value="1" title="是" >
            <input type="radio" name="isDelivery" value="0" title="否" >
        </div>
    </div>

    <input type="hidden" name="expressManId">
    <input type="hidden" name="receiveDate">
    <input type="hidden" name="deliveryDate">

    <div class="layui-form-item">
        <label class="layui-form-label">订单状态</label>
        <div class="layui-input-block">
            <input type="radio" name="orderStatus" value="1" title="用户下单" >
            <input type="radio" name="orderStatus" value="2" title="快递员接单" >
            <input type="radio" name="orderStatus" value="3" title="派送中" >
            <input type="radio" name="orderStatus" value="4" title="已收货" >
        </div>
    </div>
</form>

<form class="layui-form" action="" lay-filter="example1" id="formDom1" style="display: none; padding: 30px">

    <input type="hidden" name="id">
    <input type="hidden" name="createDate">
    <input type="hidden" name="modifyDate">
    <input type="hidden" name="sendUserId">
    <input type="hidden" name="sendName">
    <input type="hidden" name="sendMobile">
    <input type="hidden" name="sendAddress">
    <input type="hidden" name="description">
    <input type="hidden" name="remark">
    <input type="hidden" name="receiveName">
    <input type="hidden" name="receiveMobile">
    <input type="hidden" name="receiveAddress">


    <div class="layui-form-item">
        <label class="layui-form-label">是否接单</label>
        <div class="layui-input-block">
            <input type="radio" name="isReceive" value="1" title="是" >
            <input type="radio" name="isReceive" value="0" title="否" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否派送</label>
        <div class="layui-input-block">
            <input type="radio" name="isDelivery" value="1" title="是" >
            <input type="radio" name="isDelivery" value="0" title="否" >
        </div>
    </div>

    <input type="hidden" name="expressManId">
    <input type="hidden" name="receiveDate">
    <input type="hidden" name="deliveryDate">

    <div class="layui-form-item">
        <label class="layui-form-label">订单状态</label>
        <div class="layui-input-block">
            <input type="radio" name="orderStatus" value="1" title="用户下单" >
            <input type="radio" name="orderStatus" value="2" title="快递员接单" >
            <input type="radio" name="orderStatus" value="3" title="派送中" >
            <input type="radio" name="orderStatus" value="4" title="已收货" >
        </div>
    </div>
</form>


</html>